<template>
    <view class="order-coupon">
        <view class="main">
            <view class="available box">可用优惠券 {{ list.length }} 张</view>
            <view class="list">
                <view class="item box" @click="selectCoupon(item)" v-for="item in list" :key="item.id">
                    <view style="display: flex; justify-content: space-between; align-items: center">
                        <view class="item-r">
                            <view class="name">{{ item.name }}</view>
                            <view class="time">有效期至{{ filterTime(item.validEndTime) }}</view>
                            <text class="limit" v-for="itemc in item.payWayNameList" :key="itemc">
                                {{ itemc }}
                            </text>
                        </view>
                        <view class="item-l">
                            <!-- <view class="time">{{ discountTypeObj[item.discountType] || "" }}</view> -->
                            <view class="time" v-if="item.discountType == 11">{{ item.discountPrice / 100 }}元</view>
                            <view class="time-m" v-if="item.discountType == 11">满{{ item.usePrice / 100 }}元</view>
                            <view class="time" v-if="item.discountType == 12">{{ item?.discountTime }}折</view>
                            <view class="time-m" v-if="item.discountType == 12">满{{ item?.discountLimitTime }}小时</view>
                        </view>
                        <image v-if="couponData.id == item.id" class="icon" src="/static/yhj-check.png" />
                        <image v-else class="icon" src="/static/yhj-nocheck.png" />
                    </view>
                    <view class="rules">
                        <uni-collapse ref="collapse">
                            <uni-collapse-item title="使用规则" title-border="none" :border="false">
                                <view class="content">
                                    <text class="text" style="color: #999">{{ item.ruleDesc }}</text>
                                </view>
                            </uni-collapse-item>
                        </uni-collapse>
                    </view>
                </view>
            </view>
            <view class="noavailable box">不可用优惠券 {{ unList.length }} 张</view>
            <view class="list unList">
                <view class="item box" v-for="item in unList" :key="item.id">
                    <view style="display: flex; justify-content: space-between">
                        <view class="item-r">
                            <view class="name">{{ item.name }}</view>
                            <view class="time">有效期至{{ filterTime(item.validEndTime) }}</view>
                            <text class="limit" v-for="itemc in item.payWayNameList" :key="itemc">
                                {{ itemc }}
                            </text>
                        </view>
                        <view class="item-l">
                            <!-- <view class="time">{{ discountTypeObj[item.discountType] || "" }}</view> -->
                            <view class="time" v-if="item.discountType == 11">{{ item.discountPrice / 100 }}元</view>
                            <view class="time-m" v-if="item.discountType == 11">满{{ item.usePrice / 100 }}元</view>
                            <view class="time" v-if="item.discountType == 12">{{ item?.discountTime }}折</view>
                            <view class="time-m" v-if="item.discountType == 12">满{{ item?.discountLimitTime }}小时</view>
                        </view>
                    </view>
                    <view class="no-message">
                        <view>本单不可用原因：</view>
                        <view>{{ item.matchErrorMessage }}</view>
                    </view>
                    <view class="rules">
                        <uni-collapse ref="collapse">
                            <uni-collapse-item title="使用规则" title-border="none" :border="false">
                                <view class="content">
                                    <text class="text" style="color: #999">{{ item.ruleDesc }}</text>
                                </view>
                            </uni-collapse-item>
                        </uni-collapse>
                    </view>
                    <!-- <view class="item-r">
            <view class="name">{{ item.name }}</view>
            <view class="rules">
              <view class="rules-tit" @click.stop="checkRule(item.id)"
                >使用规则
                <uni-icons type="down" size="20" color="#ccc"></uni-icons>
              </view>
              <view v-show="checkRuleId === item.id" class="rules-content">
                {{ item.ruleDesc }}
              </view>
            </view>
            
          </view> -->
                </view>
            </view>
        </view>
        <view class="footer" @click="submit">
            <view class="btn">确定</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { getcoupon } from "@/service/index";
import dayjs from "dayjs";
const list = ref([]);
const unList = ref([]);
const couponData = ref({});
const checkRuleId = ref(null);
const discountTypeObj = {
    11: "满减劵",
    12: "打折券",
};
const init = () => {
    // getcoupon().then(res => {
    //     console.log("getcoupon", res)
    //     list.value = res.list
    // })
    const selectData = uni.getStorageSync("couponData");

    const couponList = uni.getStorageSync("orderUserCouponList") || [];
    list.value = couponList.filter(v => v.matchFlag === 1);
    unList.value = couponList.filter(v => v.matchFlag === 2);
    if (selectData) {
        couponData.value = selectData;
    }
};
const selectCoupon = item => {
    couponData.value = item;
};
const filterTime = date => {
    return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
};
const submit = () => {
    uni.setStorageSync("couponData", couponData.value);
    uni.navigateBack();
};
const checkRule = id => {
    checkRuleId.value = checkRuleId.value === id ? null : id;
};
onMounted(() => {
    init();
});
</script>
<style lang="less" scoped>
::v-deep {
    .uni-collapse-item__title-box {
        padding: 0;
        height: 28rpx;
        line-height: 28rpx;
    }
}
.order-coupon {
    display: flex;
    flex-direction: column;
    height: 100vh;
    .available,
    .noavailable {
        margin: 24rpx;
        padding: 24rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #ff5d15;
    }
    .noavailable {
        color: #999;
    }
    .main {
        flex: 1;
        overflow-y: auto;
        .list {
            padding: 0 24rpx;

            .item {
                // display: flex;
                // align-items: center;
                margin-bottom: 24rpx;
                // height: 220rpx;
                padding: 24rpx;

                .item-l {
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 20rpx;
                    //   margin-right: 28rpx;
                    .time {
                        font-size: 30rpx;
                        font-weight: 600;
                        color: #ff5d15;
                        margin-bottom: 10rpx;
                    }

                    .time-m {
                        background: rgba(255, 93, 21, 0.1);
                        padding: 8rpx 12rpx;
                        border-radius: 8rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #ff5d15;
                        margin-bottom: 12rpx;
                    }
                }

                .item-r {
                    font-size: 30rpx;
                    font-weight: 600;
                    color: #333333;
                    flex: 1;

                    .limit {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #ff5d15;
                        margin-bottom: 10rpx;
                        margin-right: 10rpx;
                    }
                    .name {
                        margin-bottom: 20rpx;
                        font-weight: 600;
                        font-size: 28rpx;
                        color: #333333;
                    }
                    .time {
                        font-size: 26rpx;
                        color: #999999;
                        font-weight: 400;
                        margin-bottom: 12rpx;
                    }
                    .rules {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #999999;
                        .text {
                            color: #999;
                        }

                        // .rules-tit {
                        //   display: flex;
                        //   align-items: center;
                        // }
                    }
                }
                .no-message {
                    background-color: #fafafa;
                    padding: 20rpx;
                    border-radius: 5rpx;
                    font-size: 24rpx;
                    color: #ff5d15;
                }
                .icon {
                    //   margin-top: 70rpx;
                    width: 36rpx;
                    height: 36rpx;
                }
            }
        }
        .unList {
            .item {
                background-color: #fff;
                opacity: 0.7;
                // filter: grayscale(100%);
            }
        }
    }
    .footer {
        padding: 34rpx 26rpx;
        box-shadow: 0rpx -12rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
        background-color: #fff;
        .btn {
            position: relative;
            width: 100%;
            background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
            border-radius: 60rpx;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            color: #fff;
            box-sizing: border-box;
        }
    }
}
</style>
